<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch完成写法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }

        #app {
            padding: 10px 20px;
        }

        .query {
            margin: 10px 0;
        }

        .box {
            display: flex;
        }

        textarea {
            width: 300px;
            height: 160px;
            font-size: 18px;
            border: 1px solid #dedede;
            outline: none;
            resize: none;
            padding: 10px;
        }

        textarea:hover {
            border: 1px solid #1589f5;
        }

        .transbox {
            width: 300px;
            height: 160px;
            background-color: #f0f0f0;
            padding: 10px;
            border: none;
        }

        .tip-box {
            width: 300px;
            height: 25px;
            line-height: 25px;
            display: flex;
        }

        .tip-box span {
            flex: 1;
            text-align: center;
        }

        .query span {
            font-size: 18px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap span {
            position: absolute;
            right: 15px;
            bottom: 15px;
            font-size: 12px;
        }

        .input-wrap i {
            font-size: 20px;
            font-style: normal;
        }
    </style>
</head>

<body>
    <!-- 
        完整写法：->添加额外的配置项（深度监视复杂类型，立刻执行）
        watch:{
            数据属性名:{
                deep:true,   //深度监视（针对复杂类型）
                immdiate:true,  //是否立刻执行一次handler
                handler(newValue){
                    console.log(newValue)
                }
            }
        }
    -->

    <div id="app">
        <!-- 条件选择框 -->
        <div class="query">
            <span>翻译成的语言：</span>
            <select v-model="obj.value">
                <option value="italy">意大利</option>
                <option value="english">英语</option>
                <option value="german">德语</option>
            </select>
        </div>

        <!-- 翻译框 -->
        <div class="box">
            <div class="input-wrap">
                <textarea v-model="obj.words"></textarea>
                <span><i>⌨️</i>文档翻译</span>
            </div>
            <div class="output-wrap">
                <div class="transbox">{{result}}</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 接口地址：https://applet-base-api-t.itheima.net/api/translate
        // 请求方式：get
        // 请求参数：
        // （1）words：需要被翻译的文本（必传）
        // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
        // -----------------------------------------------

        const app = new Vue({
            el: '#app',
            data: {
                words: '',
                result: '', //翻译结果
                obj: {
                    words: '朱天宇',
                    value: 'english'
                }
            },
            // 具体讲解：(1) watch语法 (2) 具体业务实现
            watch: {
                obj: {
                    deep: true,
                    immediate: true,
                    handler(newValue) {
                        clearTimeout(this.timer)
                        // 防抖：延迟执行->干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
                        this.timer = setTimeout(async () => {
                            const res = await axios({
                                url: 'https://applet-base-api-t.itheima.net/api/translate',
                                params: newValue
                            })
                            this.result = res.data.data;
                            console.log(this.result);
                        }, 300)
                    }
                }
                // 该方法会在数据变化时调用执行
                // words(newvalue) {
                //     console.log(newvalue);
                // }
                // 'obj.words'(newValue) {
                //     clearTimeout(this.timer)
                //     // 防抖：延迟执行->干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
                //     this.timer = setTimeout(async () => {
                //         const res = await axios({
                //             url: 'https://applet-base-api-t.itheima.net/api/translate',
                //             params: {
                //                 words: newValue
                //             }
                //         })
                //         this.result = res.data.data;
                //         console.log(this.result);
                //     }, 300)
                // }
            }
        })
    </script>
</body>

</html>